import { useAppDispatch } from '@/store/hooks'
import { login, sendCode } from '@/store/slices/login'
import { Button, NavBar, Form, Input, Toast } from 'antd-mobile'
import { InputRef } from 'antd-mobile/es/components/input'
import { useEffect, useRef, useState } from 'react'
import { useNavigate } from 'react-router-dom'

import styles from './index.module.scss'

const Login = () => {

  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  // 创建操作 Input 组件的 ref 对象 值为null
  const inputRef = useRef<InputRef>(null)
  // 创建 form 实例
  const [form] = Form.useForm()
  //倒计时状态
  const [tiemLeft,setTtiemLeft]=useState(0)
  //记录倒计时idde ref对象
  const timerIdRef = useRef(-1)

  // 表单提交时触发
  const onFinish = async (values: { mobile: string; code: string }) => {
    try {
      // 注意：此处，需要调用 unwrap() 才能够正常捕获 thunk action 中的错误
      await dispatch(login(values)).unwrap()

      Toast.show({
        content: '登录成功',
        duration: 800,
        afterClose: () => {
          navigate('/home')
        },
      })
    } catch (e) {
      const error = e as { data: null; message: string }
      // 错误处理
      Toast.show({
        content: error.message,
        duration: 1000,
      })
    }
  }

  // 发送验证码
  const onSenCode=()=>{
    //获取表单中的某个值getFieldValue
    const hasError=form.getFieldError('mobile').length>0
    const mobile =(form.getFieldValue('mobile') ?? '' ) as string

    //判断值是否正确
    if(hasError|| mobile.trim() === ''){
      inputRef.current?.focus()
      return 
    }
    //发送验证码 异步请求
    dispatch(sendCode(mobile))
    //倒计时开始 从60秒
    setTtiemLeft(10)
    timerIdRef.current=window.setInterval(()=>{
      setTtiemLeft(prev=>prev-1)
    },1000)
  }

  //监听定时器的改变 在timerIdRef为0 清理定时器
  useEffect(()=>{
    if(tiemLeft===0)clearInterval(timerIdRef.current)
  },[tiemLeft])

  // 在组件卸载时，清理定时器
  useEffect(()=>{
    return ()=>{
      clearInterval(timerIdRef.current)
    }
  },[])


  return (
    <div className={styles.root}>
      {/* 顶部导航 */}
      <NavBar></NavBar>

      <div className="login-form">
        <h2 className="title">账号登录</h2>

        {/* 登录表单组件 */}
        <Form form={form}
          // 设置表单初始值
          initialValues={{
            mobile: '13717644277',
            code: '24681',
          }}
          onFinish={onFinish}
        >
          {/* Form 中的每一项是一个 Form.Item 组件 */}
          <Form.Item
            className="login-item"
            name="mobile"
            rules={[
              // 必填
              {
                required: true,
                message: '请输入手机号',
              },
              // 手机号码格式
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误',
              },
            ]}
            // 表单校验的触发时机，默认（onChange）会在输入内容时进行校验
            // onBlur 表示： 在文本框失焦点时，再进行校验
            validateTrigger={['onchange']}
          >
            {/* 文本框组件 */}
            <Input placeholder="请输入手机号" maxLength={11} />
          </Form.Item>

          <Form.Item
            className="login-item"
            // extra 表示额外的信息，位于表单项的右侧
            extra=
            {<span className="code-extra" onClick={onSenCode}>
              {tiemLeft===0?'发送验证码':`${tiemLeft}s后重新获取`}
            </span>}
            
            name="code"
            rules={[
              // 必填项
              { required: true, message: '请输入验证码' },
              // 长度校验
              { len: 6, message: '验证码应为6位' },
            ]}
            validateTrigger={['onchange']}
          >
            {/* autoComplete="off" 用来关闭浏览器默认的自动完成（历史输入内容的提示）功能 */}
            <Input
              placeholder="请输入验证码"
              autoComplete="off"
              maxLength={6}
            />
          </Form.Item>

          {/* noStyle 表示不提供 Form.Item 自带的样式 */}
          <Form.Item noStyle shouldUpdate >
            {()=>{
              return(
                <Button
                  block
                  type="submit"
                  color="primary"
                  className="login-submit"
                  disabled={
                    !form.isFieldsTouched(true) || !!form.getFieldsError().filter(({ errors }) => errors.length).length
                  }
                >
                  登 录
                </Button>
              )
            }}
            
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
